CSS Grid Masonry: Põhjalik Sukeldumine Pinteresti-Stiilis Paigutuse Rakendamisse

Aastaid on Pinteresti poolt populariseeritud 'Masonry' paigutus olnud kaasaegse veebidisaini üks alustalasid. Selle iseloomulik 'kose' efekt, kus erineva kõrgusega elemendid sobituvad tihedalt kokku nagu tellised seinas, on nii esteetiliselt meeldiv kui ka sisu kuvamiseks väga tõhus. Selle pealtnäha lihtsa paigutuse saavutamine robustsel, responsiivsel ja jõudsal viisil on aga ajalooliselt olnud front-end arendajatele märkimisväärne väljakutse, nõudes sageli suurt sõltuvust JavaScripti teekidest.

CSS Gridi tulek muutis revolutsiooniliselt meie arusaama veebipaigutustest, kuid tõeline, omane Masonry lahendus jäi napilt kättesaamatuks. See tähendab, kuni praeguseni. grid-template-rows: masonry lisandumisega CSS Grid Layout Module Level 3 spetsifikatsiooni on mäng muutumas. See artikkel on põhjalik juhend ülemaailmsele arendajate kogukonnale, mis juhatab teid läbi Masonry paigutuste arengu, alates klassikalistest lahendustest kuni tipptasemel omase CSS-i rakenduseni, ning pakub praktilist, tootmisvalmis strateegiat, kasutades progresseeruvat täiustamist.

Mis täpsemalt on Masonry paigutus?

Enne koodi sukeldumist loome selge ja ühise arusaama. Masonry paigutus on ruudustikusüsteem, kus elemendid paigutatakse vertikaalselt, täites eelmises reas lühemate elementide jäetud tühimikud. Erinevalt rangest ruudustikust, kus kõik rea elemendid peavad olema horisontaalselt joondatud, optimeerib Masonry vertikaalset ruumi. Tulemuseks on kompaktne, tühikuteta paigutus, mis väldib ebamugavaid valgeid alasid ja loob dünaamilise visuaalse voo.

Põhijooned on järgmised:

• Elementidel on fikseeritud veeru laius, kuid muutuv kõrgus.
• Elemendid on paigutatud vertikaalsetesse veergudesse.
• Fikseeritud rea kõrgust ei ole; elemendid voolavad, et täita olemasolev ruum.
• Konteineri üldkõrgus on minimeeritud.

See paigutus on ideaalne pildigaleriide, portfooliote, sotsiaalmeedia voogude ja mis tahes sisurohkete juhtpaneelide jaoks, kus elementide vertikaalne mõõde on ettearvamatu.

Ajalooline lähenemine: mitmeveeruline paigutus ("häkk")

Pikka aega oli lähim, mida me puhtale CSS Masonry paigutusele saime, CSS-i mitmeveerulise paigutuse mooduli kasutamine. See tehnika hõlmab selliste omaduste nagu column-count ja column-gap kasutamist.

Kuidas see töötab

Mitmeveeruline lähenemine käsitleb teie elementide konteinerit justkui ühtse tekstiplokina ja jagab selle seejärel mitmeks veeruks.

Näide HTML struktuurist:

            <div class="multicolumn-container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- rohkem elemente -->
</div>
            

              
                Copy
              
            
          

Näide CSS-ist:

            .multicolumn-container {
  column-count: 3;
  column-gap: 1em;
}

.item {
  display: inline-block; /* Või block, sõltuvalt kontekstist */
  width: 100%;
  margin-bottom: 1em;
  break-inside: avoid; /* Takistab elementide murdumist veergude vahel */
}
            

              
                Copy
              
            
          

Plussid ja miinused

Plussid:

• Lihtsus: Seda on uskumatult lihtne rakendada vaid mõne CSS-i reaga.
• Suurepärane brauseritugi: Mitmeveerulist moodulit toetavad kõik kaasaegsed brauserid, muutes selle usaldusväärseks valikuks.

Miinused:

• Elementide järjestus: See on suurim puudus. Sisu voolab esimese veeru ülaosast selle alaossa ja jätkub seejärel teise veeru ülaosast. See tähendab, et teie elemendid on järjestatud vertikaalselt, mitte horisontaalselt. Element 1 võib olla 1. veerus, element 2 selle all, samas kui element 4 on 2. veeru ülaosas. See ei ole sageli soovitud kasutajakogemus kronoloogiliste voogude või järjestatud sisu puhul.
• Sisu jagunemine: Omadus break-inside: avoid; on ülioluline, kuid mitte lollikindel. Mõnes keerulises stsenaariumis võib elemendi sisu siiski kahe veeru vahel jaguneda, mis on äärmiselt ebasoovitav.
• Piiratud kontroll: See pakub väga vähe kontrolli üksikute elementide täpse paigutuse üle, muutes selle sobimatuks keerukamate paigutuste jaoks.

Kuigi see on nutikas lahendus, ei ole mitmeveeruline lähenemine põhimõtteliselt tõeline ruudustikusüsteem ja jääb paljude kaasaegsete rakenduste jaoks ebapiisavaks.

CSS Gridi ajastu: "Võlts" Masonry reahaaval ulatumisega

CSS Gridi saabumisega püüdsid arendajad kohe Masonry efekti jäljendada. Kuigi Grid on suurepärane kahemõõtmeliste paigutuste jaoks, nõuab see elementide sobitumist ettearvatavasse ridade ja veergude ruudustikku. Tõeline Masonry rikub seda reeglit. Siiski tekkis nutikas tehnika, mis kasutab efekti simuleerimiseks CSS Gridi ulatumisvõimalusi.

Kuidas see töötab

See meetod hõlmab standardse ruudustiku loomist paljude väikeste, fikseeritud kõrgusega ridadega. Seejärel antakse igale ruudustiku elemendile korraldus ulatuda üle teatud arvu nende ridade vastavalt oma sisu kõrgusele. See nõuab natuke JavaScripti, et arvutada iga elemendi jaoks vajalik ulatus.

Näide CSS-ist:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 20px; /* Määratle väike, fikseeritud rea kõrgus */
}

.item {
  /* JavaScript lisab siia 'grid-row-end' */
}
            

              
                Copy
              
            
          

Näide JavaScriptist (kontseptuaalne):

            const grid = document.querySelector('.grid-container');
const items = document.querySelectorAll('.item');
const rowHeight = 20; // Peab vastama CSS-i grid-auto-rows väärtusele
const rowGap = 16; // 1em, eeldades 16px baasfonti

items.forEach(item => {
  const contentHeight = item.querySelector('.content').offsetHeight;
  const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
});
            

              
                Copy
              
            
          

Plussid ja miinused

Plussid:

• Õige elementide järjestus: Erinevalt mitmeveerulisest paigutusest paigutatakse elemendid õiges vasakult-paremale, ülevalt-alla järjekorras.
• Võimsad Grid funktsioonid: Saate kasutada kõiki CSS Gridi võimsusi, sealhulgas joondamist, vahesid ja responsiivseid veergude definitsioone minmax() abil.

Miinused:

• Sõltuvus JavaScriptist: See ei ole puhas CSS lahendus. See nõuab kliendipoolse JavaScripti käivitamist pärast sisu (eriti piltide) laadimist, et mõõta kõrgusi ja rakendada stiile. See võib põhjustada sisu ümberpaigutamist või hüppamist pärast lehe esmast laadimist.
• Jõudluse lisakulu: Nende arvutuste tegemine, eriti sadade elementidega lehtedel, võib mõjutada jõudlust. Seda tuleb akna suuruse muutmisel uuesti arvutada.
• Keerukus: Seda on keerulisem seadistada ja hooldada kui lihtsat CSS-i omadust.

See CSS Gridi ja JavaScripti lähenemine sai mitmeks aastaks kaasaegsete Masonry paigutuste de facto standardiks, pakkudes parimat tasakaalu kontrolli ja lõpliku välimuse vahel, hoolimata selle sõltuvusest skriptimisest.

Tulevik on käes: omane CSS Masonry grid-template-rows abil

Hetk, mida paljud arendajad on oodanud, on lõpuks saabumas. CSS-i töörühm on spetsifitseerinud omase viisi Masonry paigutuste saavutamiseks otse CSS Gridi spetsifikatsioonis. See saavutatakse, kasutades masonry väärtust omadusele grid-template-rows või grid-template-columns.

masonry väärtuse mõistmine

Kui määrate grid-template-rows: masonry;, ütlete brauseri renderdamismootorile, et ta kasutaks elementide paigutamiseks teistsugust algoritmi. Selle asemel, et järgida ranget ruudustiku rida, paigutatakse elemendid veergu, kus on kõige rohkem vaba ruumi, luues Masonry iseloomuliku tiheda efekti.

Praegune brauseritugi

KRIITILINE MÄRKUS: Selle kirjutamise hetkel on omane CSS Masonry eksperimentaalne funktsioon. Selle tugi on väga piiratud. See on tulevikku vaatav tehnoloogia.

• Firefox: Toetatud, kuid funktsioonilipu taga. Selle lubamiseks minge oma Firefoxi brauseris aadressile about:config ja seadke layout.css.grid-template-masonry-value.enabled väärtuseks true.
• Safari: Varem saadaval Safari Technology Preview's, kuid on spetsifikatsiooni uuenduste ootuses eemaldatud.
• Chrome/Edge: Pole veel rakendatud.

On ülioluline kontrollida ressursse nagu CanIUse.com uusima toeinfo saamiseks. Kuna tugi ei ole laialt levinud, ei saa seda lahendust tootmises kasutada ilma kindla tagavarastrateegiata.

Kuidas rakendada omast CSS Masonryt

Rakendamine on kaunilt lihtne. Just see teebki selle funktsiooni nii põnevaks.

Näide CSS-ist:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1em; /* 'gap' on kaasaegne lühend grid-gap'ile */
  align-items: start; /* Tagab, et elemendid algavad oma raja ülaosast */
}
            

              
                Copy
              
            
          

See on kõik. Vaatame need omadused üle:

• display: grid;: Hädavajalik alguspunkt.
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));: See on klassikaline responsiivse ruudustiku seadistus. See käsib brauseril luua nii palju veerge, kui mahub, kusjuures iga veerg on vähemalt 250px lai ja kasvab, et täita lisaruumi.
• grid-template-rows: masonry;: See on maagiline omadus. See lülitab rea paigutuse algoritmi standardruudustikult Masonry peale.
• gap: 1em;: Määratleb vahe kõikide ruudustiku elementide vahel, nii horisontaalselt kui ka vertikaalselt.
• align-items: start;: See joondab elemendid nende ruudustikuraja algusesse. Vertikaalse Masonry paigutuse puhul on see vaikekäitumine, kuid hea tava on olla selgesõnaline.

Selle koodiga tegeleb brauser kõigi keeruliste arvutustega elementide paigutamiseks. Ei mingit JavaScripti, ei mingeid ümberpaigutusi, lihtsalt puhas ja jõudlusvõimeline CSS.

Tootmisvalmis strateegia: progresseeruv täiustamine

Arvestades praegust universaalse brauseritoe puudumist omasele CSS Masonryle, ei saa me seda lihtsalt kasutada ja parimat loota. Vajame professionaalset strateegiat, mis pakub parimat kogemust enamikule kasutajatele. Vastus on progresseeruv täiustamine.

Meie strateegia on järgmine:

1. Kasutada kaasaegset, omast CSS Masonryt brauserites, mis seda toetavad.
2. Pakkuda robustset tagavaralahendust, kasutades CSS Gridi + JavaScripti ulatumistehnikat kõigi teiste brauserite jaoks.

1. samm: baas-CSS (tagavaralahendus)

Alustame CSS-i kirjutamisega meie JavaScripti-põhise tagavaralahenduse jaoks. See on kood, mille kõik brauserid esialgu saavad.

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
  /* Väike rea kõrgus meie JS-põhise ulatuse arvutamiseks */
  grid-auto-rows: 10px;
}

.item {
  /* Lisame elementidele mõned põhilised stiilid */
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 1em;
  box-sizing: border-box;
}
            

              
                Copy
              
            
          

2. samm: JavaScripti tagavaralahendus

Järgmisena kirjutame JavaScripti, mis toidab tagavaralahendust. See skript käivitub ainult siis, kui omane CSS-lahendus pole saadaval.

            // Oodake, kuni DOM on täielikult laaditud
document.addEventListener('DOMContentLoaded', () => {
  // Kontrollige, kas brauser toetab 'grid-template-rows: masonry'
  const isMasonrySupported = CSS.supports('grid-template-rows', 'masonry');

  if (!isMasonrySupported) {
    console.log("Brauser ei toeta omast CSS Masonryt. Rakendan JS tagavaralahenduse.");
    applyMasonryFallback();

    // Valikuline: käivita uuesti akna suuruse muutmisel
    window.addEventListener('resize', debounce(applyMasonryFallback, 150));
  }
});

function applyMasonryFallback() {
  const container = document.querySelector('.masonry-container');
  if (!container) return;

  // Hankige kõik konteineri otsesed lapsed
  const items = container.children;

  // Määratlege ruudustiku omadused (peaksid vastama teie CSS-ile)
  const rowHeight = 10; 
  const rowGap = 16; // Eeldades, et 1em = 16px

  for (let item of items) {
    item.style.gridRowEnd = 'auto'; // Lähtestage eelmised ulatused
    const itemHeight = item.offsetHeight;
    const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// Debounce funktsioon, et piirata funktsiooni käivitamise sagedust
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}
            

              
                Copy
              
            
          

3. samm: täiustamine @supports reegliga

Lõpuks kasutame CSS-i @supports at-reeglit. See on võimas funktsioon, mis võimaldab meil rakendada CSS-reegleid ainult siis, kui brauser mõistab konkreetset CSS-i omaduse-väärtuse paari. See on meie progresseeruva täiustamise tuum.

Lisame selle oma stiililehele:

            /* Rakenda need reeglid AINULT siis, kui brauser toetab omast Masonryt */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    /* Kirjuta üle tagavaralahenduse grid-auto-rows */
    grid-template-rows: masonry;
    grid-auto-rows: unset; /* Või 'auto', et olla puhas */
  }
}
            

              
                Copy
              
            
          

Kuidas see kõik kokku töötab

1. Kaasaegne brauser (nagu lipuga Firefox): Brauser loeb CSS-i. See mõistab grid-template-rows: masonry. Rakendatakse @supports plokk, mis kirjutab üle grid-auto-rows ja lubab omase, jõudlusvõimelise Masonry paigutuse. Meie JavaScript kontrollib CSS.supports(), mis tagastab true, seega tagavaralahenduse funktsioon ei käivitu kunagi. Kasutaja saab parima võimaliku kogemuse.
2. Standardne brauser (nagu Chrome): Brauser loeb CSS-i. See ei mõista grid-template-rows: masonry, seega ignoreerib see @supports plokki täielikult. See rakendab baas-CSS-i, sealhulgas grid-auto-rows: 10px. Meie JavaScript kontrollib CSS.supports(), mis tagastab false. Käivitatakse funktsioon applyMasonryFallback(), mis arvutab rea ulatused ja rakendab need ruudustiku elementidele. Kasutaja saab täielikult toimiva Masonry paigutuse, mis töötab JavaScripti abil.

See lähenemine on robustne, tulevikukindel ja pakub suurepärast kogemust kõigile, olenemata nende brauseritehnoloogiast. Mida rohkem brausereid võtab omaks omase Masonry, seda vähem kasutatakse JavaScripti tagavaralahendust, ilma et koodis oleks vaja muudatusi teha.

Kokkuvõte: ehitades tulevikuks

Teekond lihtsa, deklaratiivse Masonry paigutuseni CSS-is on olnud pikk, kuid me oleme suure läbimurde lävel. Kuigi grid-template-rows: masonry on alles eksperimentaalses faasis, kujutab see endast olulist hüpet edasi veebipaigutuse võimekuses.

Arendajatele üle maailma on peamine järeldus ehitada tulevikku silmas pidades. Progresseeruvat täiustamist omaks võttes saate hakata neid võimsaid uusi funktsioone kasutama juba täna. Saate pakkuda tipptasemel brauserite kasutajatele väga jõudlusvõimelist, omast kogemust, tagades samal ajal kõigile teistele kindla, funktsionaalse ja visuaalselt identse kogemuse hästi koostatud JavaScripti tagavaralahenduse kaudu.

Põhiliste paigutusmustrite jaoks rasketest, kolmandate osapoolte teekidest sõltumise päevad on loetud. Mõistes CSS Gridi, ulatumise ja uue masonry väärtuse põhimõtteid, olete hästi varustatud, et ehitada järgmise põlvkonna kauneid, responsiivseid ja jõudlusvõimelisi veebiliideseid.